<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-preview-main">
      <div class="JNPF-common-page-header">
        <p>协会信息</p>
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()"> 保 存</el-button>
        </div>
      </div>
      <el-row :gutter="15" class=" main" :style="{margin: '0 auto',width: '100%'}">
        <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="right">
          <template v-if="!loading">
            <el-col :span="24">
              <el-card class="mb-20" shadow="always" header="基础信息">
                <el-col :span="8">
                  <el-form-item label="协会名称" prop="assoCitationName">
                    <el-input v-model="dataForm.assoCitationName" :maxlength="50" placeholder="请输入协会名称" clearable :style='{"width":"100%"}'>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="协会地区" prop="assoCitationArea">
                    <JNPF-Address v-model="dataForm.assoCitationArea" placeholder="请选择协会地区" clearable :level="2">
                    </JNPF-Address>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="详细地址" prop="assoCitationAddress">
                    <el-input v-model="dataForm.assoCitationAddress" :maxlength="100" placeholder="请输入详细地址" clearable
                      :style='{"width":"100%"}'>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-card>
            </el-col>
            <el-col :span="24">
              <el-card class="mb-20" shadow="always" header="详细信息">
                <el-col :span="8">
                  <el-form-item label="联系人" prop="contactName">
                    <el-input v-model="dataForm.contactName" :maxlength="10" placeholder="请输入联系人" clearable :style='{"width":"100%"}'>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="手机号码" prop="phoneNum">
                    <el-input v-model="dataForm.phoneNum" :maxlength="11" placeholder="请输入手机号码" clearable :style='{"width":"100%"}'>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="客服电话" prop="customerServicePhone">
                    <el-input v-model="dataForm.customerServicePhone" :maxlength="11" placeholder="请输入客服电话" clearable
                      :style='{"width":"100%"}'>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="协会简介" prop="introduction">
                    <el-input v-model="dataForm.introduction" placeholder="请输入协会简介" :maxlength="50" clearable :style='{"width":"100%"}'>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-card>
            </el-col>
            <el-col :span="24">
              <el-card class="mb-20" shadow="always" header="财务信息">
                <el-col :span="8">
                  <el-form-item label="银行账号名" prop="bankAccountName">
                    <el-input v-model="dataForm.bankAccountName" placeholder="请输入银行账号名" :maxlength="50" clearable :style='{"width":"100%"}'>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开户银行" prop="bankName">
                    <el-input v-model="dataForm.bankName" placeholder="请输入开户银行" clearable :maxlength="50" :style='{"width":"100%"}'>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="银行账号" prop="bankAccount">
                    <el-input v-model="dataForm.bankAccount" placeholder="请输入银行账号" :maxlength="20" clearable :style='{"width":"100%"}'>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="信用代码" prop="creditCode">
                    <el-input v-model="dataForm.creditCode" placeholder="请输入信用代码" maxlength="18" clearable :style='{"width":"100%"}'>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-card>
            </el-col>
            <el-col :span="24">
              <el-card class="mb-20" shadow="always" header="协会LOGO">
                <el-col :span="24">
                  <el-form-item prop="logo">
                    <JNPF-UploadImg v-model="dataForm.logo" :fileSize="5" sizeUnit="MB" :limit="1">
                    </JNPF-UploadImg>
                  </el-form-item>
                </el-col>
              </el-card>
            </el-col>
          </template>
        </el-form>
      </el-row>
    </div>
  </div>
</template>
<script>
  import {
    getDataInterfaceRes
  } from '@/api/systemData/dataInterface'
  import {
    getDictionaryDataSelector
  } from '@/api/systemData/dictionary'
  import {
    getInfo, associationInfo
  } from '@/api/asso/system/associationInfo'
  export default {
    components: {},
    props: [],
    data() {
      return {
        visible: false,
        loading: false,
        btnLoading: false,
        selectDialogVisible: false,
        currTableConf: {},
        addTableConf: {},
        tableRows: {},
        dataForm: {
          assoCitationName: '',
          assoCitationArea: [],
          assoCitationAddress: '',
          contactName: '',
          phoneNum: '',
          customerServicePhone: '',
          introduction: '',
          bankAccountName: '',
          bankName: '',
          bankAccount: '',
          creditCode: '',
          logo: [],
        },
        rules: {
          assoCitationName: [{
            required: true,
            message: '请输入协会名称',
            trigger: 'blur'
          }],
          assoCitationArea: [{
            required: true,
            message: '请选择协会地区',
            trigger: 'change'
          }],
          assoCitationAddress: [{
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }],
          contactName: [{
            required: true,
            message: '请输入联系人',
            trigger: 'blur'
          }],
          phoneNum: [{
              required: true,
              message: '请输入手机号码',
              trigger: 'blur'
            },
            {
              pattern: /^1[3456789]\d{9}$/,
              message: '请输入正确的手机号码',
              trigger: 'blur'
            }
          ],
          customerServicePhone: [{
              required: true,
              message: '请输入客服电话',
              trigger: 'blur'
            },
            {
              pattern: /^0\d{2,3}-?\d{7,8}$/,
              message: '请输入正确的电话号码',
              trigger: 'blur'
            }
          ],
          introduction: [{
            required: true,
            message: '请输入协会简介',
            trigger: 'blur'
          }],
          bankAccountName: [{
            required: true,
            message: '请输入银行账号名',
            trigger: 'blur'
          }],
          bankName: [{
            required: true,
            message: '请输入开户银行',
            trigger: 'blur'
          }],
          bankAccount: [{
            required: true,
            message: '请输入银行账号',
            trigger: 'blur'
          }],
          creditCode: [{
            required: true,
            message: '请输入信用代码',
            trigger: 'blur'
          }],
          logo: [{
            required: true,
            message: '请至少选择一张图片',
            trigger: 'click'
          }],
        },
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getInfo()
    },
    mounted() {},
    methods: {
      goBack() {
        this.$emit('refresh')
      },
      init() {
        this.associationareaList = []
        this.logoList = []
      },
      getInfo() {
        getInfo().then((res) => {
          if (res.data.id) {
            this.dataInfo(res.data)
            this.loading = false
          }
        }).catch()
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            var _data = this.dataList()
            associationInfo(_data).then((res) => {
              this.$message({
                message: res.msg,
                type: 'success',
                duration: 1000,
                onClose: () => {
                }
              })
            })
          }
        })
      },
      openSelectDialog(key) {
        this.currTableConf = this.addTableConf[key]
        this.currVmodel = key
        this.selectDialogVisible = true
        this.$nextTick(() => {
          this.$refs.selectDialog.init()
        })
      },
      addForSelect(data) {
        for (let i = 0; i < data.length; i++) {
          let item = {
            ...this.tableRows[this.currVmodel],
            ...data[i]
          }
          this.dataForm[this.currVmodel].push(item)
        }
      },
      dataList() {
        var _data = JSON.parse(JSON.stringify(this.dataForm));
        _data.assoCitationArea = JSON.stringify(_data.assoCitationArea)
        _data.logo = JSON.stringify(_data.logo)
        return _data;
      },
      dataInfo(dataAll){
        let _dataAll =dataAll
        _dataAll.assoCitationArea = JSON.parse(_dataAll.assoCitationArea)
        _dataAll.logo = JSON.parse(_dataAll.logo)
        this.dataForm = _dataAll
      },
    },
  }
</script>
